// react中声明组件的方式：类组件、函数组件
// 区别：类组件适合做比较复杂的功能，有生命周期，有数据状态，有this...
// 函数组件适合做简单的页面展示，没有生命周期，没有数据状态，没有this，性能好
import React, { Component } from 'react';
import './ComEvent.css'

class ComEvent extends Component {
  constructor() {
    super();
    // 初始化数据，类似vue中的data
    this.state = {
      age: 18
    }
    // 适用于函数多次调用，可以在构造函数中统一处理
    this.showClick = this.showClick.bind(this)
  }
  showClick() {
    console.log(this.state.age);
  }
  showArg(arg1, arg2) {
    console.log(arg1);
    console.log(arg2);
  }
  showEvent(e) {
    console.log(e);
    console.log(e.target);
  }
  showAll(e, val) {
    console.log(e);
    console.log(val);
  }
  showMenu(e) {
    e.preventDefault()
    console.log('你右键了');
  }
  clickDiv(e, val) {
    // 阻止冒泡 
    e.stopPropagation()
    // console.log(e);
    console.log(val);
  }
  clickHandler(val) {
    console.log(val);
  }
  render() {
    return (
      <div>
        <p>这是我的第一个类组件,我永远{this.state.age}岁</p>
        {/* 通过bind修改this指向 */}
        {/* <button onClick={this.showClick.bind(this)}>点击-ES5</button> */}
        <button onClick={this.showClick}>点击-ES5</button>
        <br />
        <button onClick={()=>this.showClick()}>点击-ES6</button>
        <hr />
        {/* 自定义参数 */}
        <button onClick={this.showArg.bind(this, 666, this.state.age)}>点击-ES5</button>
        <br />
        <button onClick={()=>this.showArg(666, this.state.age)}>点击-ES6</button>
        <hr />
        {/* 预定义参数-事件对象：e */}
        {/* 隐式传递 */}
        <button onClick={this.showEvent.bind(this)}>点击-ES5</button>
        <br />
        {/* 显式传递 */}
        <button onClick={(e)=>this.showEvent(e)}>点击-ES6</button>
        <hr />
        {/* 全都要 */}
        <button onClick={this.showAll.bind(this, this.state.age)}>点击-ES5</button>
        <br />
        <button onClick={(e)=>this.showAll(e, this.state.age)}>点击-ES6</button>
        <input type="text" value={this.state.age} onChange={(e)=>this.showEvent(e)} />
        <hr />
        <button onContextMenu={(e)=>this.showMenu(e)}>右键</button>
        <hr />
        {/* 默认的冒泡方式 */}
        <div className="class1" onClick={(e)=>this.clickDiv(e, 'class1')}>
          <div className="class2" onClick={(e)=>this.clickDiv(e, 'class2')}>
            <div className="class3" onClick={(e)=>this.clickDiv(e, 'class3')}></div>
          </div>
        </div>
        <hr />
        {/* 捕获的方式 */}
        <div className="class1" onClickCapture={()=>this.clickHandler('class1')}>
          <div className="class2" onClickCapture={()=>this.clickHandler('class2')}>
            <div className="class3" onClickCapture={()=>this.clickHandler('class3')}></div>
          </div>
        </div>
      </div>
    );
  }
}

export default ComEvent;

